<!--资源管理-->
<template>
  <div class='resourceIndex'>
    <resource-list ref="list" @getlistId="openEdit">
      <template #btn>
        <div class="btn">
          <el-button size="small" @click="openAddResource">添加</el-button>
          <el-button size="small" @click="toResourceCategory">资源分类</el-button>
        </div>
      </template>
    </resource-list>
    <add-resource ref="detail"  @refreshData='getRefresh'></add-resource>
  </div>
</template>

<script>
// 引入列表组件
import resourceList from './components/list'
// 引入弹窗组件
import addResource from './components/addResource'
export default {
  name: 'resourceIndex',
  components: {
    resourceList,
    addResource
  },
  data () {
    return {
    }
  },
  methods: {
    // 点击添加按钮后，弹窗部分打开，来新增资源
    // 当为子组件绑定ref后,父组件就可以通过this.$refs.属性名,访问子组件的方法
    openAddResource () {
      this.$refs.detail.onpenDialog()
    },
    // 监听弹窗保存后的情况,重新渲染页面(刷新页面)
    getRefresh () {
      this.$refs.list.getResourcePages()
    },
    // 得到list点击编辑后传递过来的id值
    openEdit (val) {
      this.$refs.detail.getResourceItem(val)
    },
    // 跳转到ResourceCategory(资源分类)页面
    toResourceCategory () {
      this.$router.push({ name: 'resourceCategory' })
    }
  }
}
</script>

<style>
.btn{
  margin-left:20px;
}
</style>
